<template>
    <div>
      <h1>会员显示页</h1>
      <a href="/">会员新增</a>
      <br>
      <input type="text" placeholder="会员姓名" v-model="page.name">
      <input type="date" v-model="page.d1">-<input type="date" v-model="page.d2">
      <select v-model="page.sex">
        <option value="0">请选择性别</option>
        <option value="1">男</option>
        <option value="2">女</option>
      </select>
      <input type="button" value="查询" @click="chx">
      <table class="table">
        <thead>
            <tr>
                <td>会员编号</td>
                <td>会员姓名</td>
                <td>会员性别</td>
                <td>会员年龄</td>
                <td>会员生日</td>
                <td>状态</td> 
                <td>爱好数量</td>
                <td>爱好</td>
                <td>会员等级</td> 
                <td>删除</td>
                <td>修改</td>
                <td>详情</td>
            </tr>
            <tr v-for="e in data">
                <td>{{ e.id }}</td>
                <td>{{ e.name }}</td>
                <td>{{ e.sex==1?'男':'女' }}</td>
                <td>{{ e.age }}</td>
                <td>{{ moment( e.memberDate).format("YYYY-MM-DD") }}</td>
                <td>{{ e.state?'启用':'禁用' }}</td> 
                <td>{{ e.houbbyCount }}</td>
                <td>{{ e.houbbyString }}</td>
                <td>{{ e.levelName }}</td> 
                <td>
                    <input type="button" value="删除" @click="deletemem(e.id)">
                </td>
                <td>
                    <input type="button" value="修改" @click="updatemem(e.id)">
                </td>
                <td>
                    <input type="button" value="详情" @click="xiangqing(e.id)">
                </td>
            </tr>
        </thead>
      </table>
    </div>
</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'
import moment from 'moment'

const router=useRouter();

onMounted(()=>{
    show();
})
//查询
const chx=()=>{
    show();
}
//显示model
const data = ref([{
    "id": 2,
    "name": "张三",
    "sex": 1,
    "age": "22",
    "memberDate": "2025-04-22T09:13:16.298",
    "state": true,
    "isDeleted": true,
    "houbbyString": "画画,篮球",
    "houbbyCount": 2,
    "memberLevelId": 1,
    "levelName": "白银会员"
  }])
//查询model
const page=ref({
    name:"",
    d1:"",
    d2:"",
    sex:0
})

const show=()=>{
    axios.get("https://localhost:7048/api/Member/ShowMember",{params:page.value}).then(res=>{
        data.value=res.data
    })
}

//删除
const deletemem=(val:any)=>{
    if(!confirm('确认删除吗'))
{
    return;
}
axios.delete("https://localhost:7048/api/Member/DeleteMember",{params:{id:val}}).then(res=>{
    if(res.data>0)
{
    alert("删除成功");
    show();
}
else{
    alert("删除失败");
    return;
}
})
}

//跳转修改页
const updatemem=(val:any)=>{
    if(!confirm('确认修改吗'))
{
    return;
}
    router.push({path:"/up",query:{id:val}})
    
}
//查看详情
const xiangqing=(val:any)=>{
    if(!confirm('确认查看详情吗'))
{
    return;
}
    router.push({path:"/xq",query:{id:val}})
}

</script>

<style scoped>

</style>
